Project Overview
My role:
Through-life UX/UI designer for the Sure Spot app.
My responsibilities:
- Conducting market research including problem and opportunity analysis.
- User research and interviews.
- Creation of user personas.
- Development of user flows and information architecture.
- Paper and digital wire-framing.
- Low and mid-fidelity prototyping.
- Conducting usability studies, including post-study analysis.
- Design iteration.
Tools:
- Pen and paper.
- Figma.
- Keynote.
Duration:
7 months, commencing July 2023.
Discovery
The empathise phase for Sure Spot began in October 2023, with detailed competitor market and user research being undertaken to better understand the landscape, and identify areas for potential product differentiation.
My research methods included SWOT analysis, interviews, and ethnographic fieldwork. I surmised that people who’ve recently discovered water sports for the first time likely possess insufficient Knowledge, Skill, and Experience (KSE), to confidently interpret complex marine forecast information. They are likely to lack confidence and be easily distracted by general excitement of their new-found interest.
It was also likely that they will routinely neglect to check forecast information, nor be aware of the importance of carrying out basic safety practices, for water-based pursuits.
Understanding the Problem
My broad finding of market competition was the view that all water sports enthusiasts are competent and able to understand complex marine forecasting, and what this means for their personal safety.
However, this misplaced belief frequently leaves beginners – and likely, intermediates – feeling intimidated and overwhelmed, particularly with regards to unknown waters and local weather conditions and hazards.
Business Requirements
It was important to be mindful of commercial interests and drivers. The development of a fit for purpose Business Requirements document helped set out the business strategy, key stakeholder management needs, as well as the specific project resource needs.
Competitive Analysis
Articulating Potential Solutions
With a sound appreciation of market competition, ideas for product differentiation, a growing understanding of user needs, and cognisant of business goals, I started to articulate potential solutions.
Creating Hypotheses
From potential solutions came two hypotheses:
Hypothesis Statement #1
For a display of weather conditions in real-time:
We believe that by designing a simple and intuitive real-time weather condition display, we will ensure users are able to glean essential weather condition information quickly, efficiently, and at any given moment, so that well-informed decisions become routine.
Hypothesis Statement #2
For recommendations that can help users stay safe:
We believe that by incorporating helpful weather-related guidance and safety features into our design, we will ensure users adequately prepare for water-sports activities, based on self-imposed limits regarding water-related knowledge, skills, experience, and forecasted weather conditions.
Developing User Stories
I spent a great deal of effort on the creation of realistic user stories, producing granular representations of people’s goals, aspirations, and expectations. These were used as a scaffold to better align my thinking; they allowed me to better empathise with users and helped me generate a ‘best fit’ solution that provided real day-to-day product value for the users I would be designing for.
The user stories started out very broad, but quickly narrowed until they became granular enough to be actionable:
Survey's & Interviews
Survey's and one-on-one interviews helped me understand users’ journeys and specific issues the app would need to address:
The accurate capture of each participants feedback was crucial:
Sense through Affinity Mapping
Affinity mapping enabled me to distil large amounts of information and start to make sense of it all. Grouping all this information into key categories helped break down a complex information landscape and narrow my focus:
Affinity mapping then enabled me to identify patterns and deduce valuable insights:
Insights
User Personas
Two user personas were created, and continuously developed, as new research came to light. Here's Hannah Fichtler:
Journey Mapping and User Flows
I employed User journey mapping to create rich narratives to aid the development of user flows. This helped uncover key emotional and procedural moments which the app needed to address:
Hannah Fichtler
Scenario:
Hannah's just arrived at the beach for a day's Stand-up Paddle-boarding. She's never been to this beach before, so the water and surround coastline are unfamiliar to her.
Goals & Expectations:
Hannah wants to make sure she doesn't drift too far from the beach by creating an alert on the Sure Spot app.
User Story #3:
As a Sure Spot user, I want to create an alert on the app, so that I'll be notified if I drift too far from the beach.
Entry Point:
Homepage.
Success Criteria:
Geo-fence and Push Notification enabled.
Task Analysis:
1. Select 'Add Geo-fence'.
2. Find launch site.
3. Set launch site.
4. Confirm centre-point of geo-fence.
5. Set geo-fence radius.
6. Confirm & enable geo-fence.
7. Select nominated person(s).
8. Add additional nominated person(s).
9. Confirm and enable push notifications.
Information Architecture
I developed a site map based on user flows, including a closed card sorting exercise. This helped me understand user expectations and their interpretation of key weather, and safety-related topics.
The findings enabled me to build the structure of the app by knowing what content to place where, and how to best label categories:
Low-Fidelity Wireframing
Rapid sketching allowed me to explore design patterns common among apps in the competitive landscape, thereby helping me to understand which needed to be carried over into Sure Spot to ensure familiarity. This also helped identify screen types that could serve multiple functions, as well as swiping / touch gestures that would likely be the most intuitive.
Low-fidelity prototype testing allowed me to gain a deeper understanding of how users expect to complete the tasks I was focusing on. By observing their actions, and through good interviewing, I knew which adjustments needed to be made to build a more fully realised high-fidelity prototype.
Small details, such as actionable and consistent iconography, and consistent navigational paths, were important elements of the design system.
Several rounds of rapid paper sketching revealed the challenge of keeping key tasks simple. This exercise was important in discovering which design patterns made the most sense, and how users would best navigate between screens.
Mid-Fidelity Wireframing
I eventually felt confident enough in my sketched ideas and design thought process to develop digital mid-fidelity wireframes.
A key consideration was to follow a consistent design pattern, as well as the simplification of inefficient tasks.
Usability Testing
The mid-fidelity wireframes I created now move into the test phase where I recruited users to interact with them. Throughout this process, I keenly observed test participants by recording and gathering insights from them, prior to evaluating their responses. In preparation, I wrote a detailed usability test plan to define the purpose of the test; i.e., what and why I wanted to test as it was important to clearly articulate objectives, methodology, tasks, and metrics for me to obtain meaningful results.
Tests were conducted in-person, with 6 participants involved. I produced detailed transcripts for all 6 tests, based on my observations of the participants interaction with the prototype.
Throughout the test phase, I made detailed notes of their behaviours, mistakes, confusions etc. and listened to their thoughts and feelings. These transcripts provided rich feedback and deepened my understanding of user mental models, and their overall experience of the prototype.
High-Fidelity Prototype
After finishing mid-fidelity prototype testing, I created a high-fidelity prototype using Figma. Further usability testing was conducted to detect issues in information architecture and flows that generated friction for users.
Reflection
With the final prototype created, I believe I have met the goals that were set out in the brief at the beginning of the design process. I designed an app for Sure Spot that provides both weather forecasting and safety related features for the beginner and intermediate level water sports enthusiast.
My main takeaway has been to experience the value of rapid sketching / prototyping by creating several low-fidelity wireframe designs, many of which were discarded, before selecting a design to be further developed as part of the iterative design process.
I have also come to understand that in every design there is a point of diminishing return where further improvement becomes marginal for the effort and resource allocated, unless significant changes to the design variables are made. Remembering that ‘done is better than perfect’ is an important lesson to take forward in future projects.
Looking Ahead
I would like to expand this project to a larger target audience by increasing user testing and designing more features. I sense there is additional scope to further develop the app by targeting more experienced user groups, particularly those able to share their insights on specific water sports locations etc.
Additionally, there is likely merit in greater customisation; for example, the ability for users to select sport-specific weather and location information tailored to their individual needs.
There is undoubtedly a need to recruit professional test participants who’re able to offer expert insight on specific features; for example, expertise in geo-fencing and route-planning technology, since these are critical safety features which are vital to get right. These are vital aspects that require further testing before any hand-off and release.
